<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>条件渲染的作业</title>
</head>
<body>
<div id="app">
    <h1>演示条件判断</h1>
    <!--
    1. 当用户输出成绩后, 我们判断成绩的范围，并进行修正
    2. 事件处理: onblur[失去焦点]
    -->
    请输入成绩1-100: <input v-on:blur="setScore" type="text" v-model="score">
    <p>你输入的成绩是:{{score}}</p>
    <!--如果用户输入的成绩大于100, 就修正成100, 如果用户输入的成绩小于0, 就修正成0-->
    <div v-if="score >= 90">你的成绩优秀</div>
    <div v-else-if="score >= 70">你的成绩良好</div>
    <div v-else-if="score >= 60">你的成绩及格</div>
    <div v-else="score < 60">你的成绩不及格</div>
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app", //创建的vue实例挂载到 id=app的div
        data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
            score: 0
        },
        methods: {
            setScore() {
                //判断分数，并修正
                if (this.score > 100) {
                    this.score = 100;
                }
                if (this.score < 0) {
                    this.score = 0;
                }
            }
        }
    })
</script>
</body>
</html>